<template>
  <div class="apply">
    <div class="d-flex justify-content-between">
      <div>
        <div class="leftBar d-flex">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="院系">
              <el-select v-model="searchForm.collegeName" placeholder="请选择院系">
                <el-option
                    v-for="item in collegeData"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="searchForm.Sno" placeholder="请输入学号"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="GetApplyInfoData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="mb-2">
          <el-radio-group v-model="searchForm.radio" @change="GetApplyInfoData">
            <el-radio :label="3" border>全部</el-radio>
            <el-radio :label="0" t border>未审核</el-radio>
            <el-radio :label="1" border>审核通过</el-radio>
            <el-radio :label="2" border>驳回</el-radio>
          </el-radio-group>
          <el-popover
              placement="bottom"
              trigger="manual"
              v-model="visibleLook">
            <div id="lookAt" style="width: 450px;height: 350px;background-color: white"></div>
            <el-button slot="reference" class="ms-5" type="primary" @click="lookAt">查看数据分析</el-button>
          </el-popover>

        </div>
      </div>
      <div class="rightBar">
        <download-excel
            class="export-excel-wrapper d-inline me-2"
            :data="json_data"
            :fields="json_fields"
            name="报名信息表.xls">
          <el-button type="primary" icon="el-icon-download" data-bs-toggle="tooltip" data-bs-placement="top"
                     title="报名信息表下载" circle></el-button>
        </download-excel>
        <el-popover
            placement="top"
            width="160"
            v-model="visible">
          <p>确定全部删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="delAllData">确定</el-button>
          </div>
          <el-button slot="reference" type="danger" icon="el-icon-delete" data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="全部删除" circle></el-button>
        </el-popover>

      </div>
    </div>
    <div class="applyBody">
      <el-table
          ref="singleTable"
          :data="applyData"
          highlight-current-row
          :header-cell-style="{'text-align':'center'}"
          :cell-style="cellStyle"
          border
          style="width: 100%;background-color: white">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓名：">
                <span>{{ props.row.user[0].name }}</span>
              </el-form-item>
              <el-form-item label="性别：">
                <span>{{ props.row.user[0].sex|sex }}</span>
              </el-form-item>
              <el-form-item label="身份证号：">
                <span>{{ props.row.user[0].IDCard }}</span>
              </el-form-item>
              <el-form-item label="电话号码：">
                <span>{{ props.row.user[0].tel }}</span>
              </el-form-item>
              <el-form-item label="学校：">
                <span>{{ props.row.user[0].schoolName|school }}</span>
              </el-form-item>
              <el-form-item label="学院：">
                <span>{{ props.row.user[0].collegeName|college }}</span>
              </el-form-item>
              <el-form-item label="专业：">
                <span>{{ props.row.user[0].majorName|major }}</span>
              </el-form-item>
              <el-form-item label="状态：">
                <span><el-tag
                    :type="props.row.status===0?'info':props.row.status===2?'danger':'success'"
                    effect="dark">
              {{ props.row.status === 0 ? '未审核' : props.row.status === 2 ? '驳回' : '已审核' }}
            </el-tag></span>
              </el-form-item>
              <el-form-item label="创建时间：">
                <span>{{ props.row.createTime|time }}</span>
              </el-form-item>
              <el-form-item label="修改时间：">
                <span>{{ props.row.updateTime|time }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            type="index"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            property="user[0].name"
            label="姓名"
            width="120"
        >
        </el-table-column>
        <el-table-column
            property="contest[0].name"
            label="竞赛名称"
            width="130"
            :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
            label="学校"
            width="130"
            :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.user[0].schoolName|school }}
          </template>
        </el-table-column>
        <el-table-column
            label="学院"
            width="130"
            :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.user[0].collegeName|college }}
          </template>
        </el-table-column>
        <el-table-column
            label="专业"
            width="130"
            :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            {{ scope.row.user[0].majorName|major }}
          </template>
        </el-table-column>
        <el-table-column
            label="状态"
            width="130">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.status===0?'info':scope.row.status===2?'danger':'success'"
                effect="dark">
              {{ scope.row.status === 0 ? '未审核' : scope.row.status === 2 ? '驳回' : '通过' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="创建时间"
            width="130">
          <template slot-scope="scope">
            {{ scope.row.createTime|time }}
          </template>
        </el-table-column>
        <el-table-column
            label="更新时间"
            width="130">
          <template slot-scope="scope">
            {{ scope.row.updateTime|time }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-dialog
                title="审核操作"
                :visible.sync="dialogVisible"
                width="30%">
              <el-select v-model="isOk" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleClickOk">确 定</el-button>
  </span>
            </el-dialog>
            <el-button @click="handleClickCheck(scope.row._id)" class="m-1" type="primary" size="mini">审核</el-button>
            <el-button @click="delAllData(scope.row._id)" type="danger" class="m-1" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt-3"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import admin from "../../../api/admin";
import time from "../../../filter/time";
import sex from "../../../filter/sex";
import school from "../../../filter/school"
import college from "../../../filter/college";
import major from "../../../filter/major";
import init from "../../../api/init";

export default {
  name: "apply",
  data() {
    return {
      limit: 30,
      skip: 0,
      page: 1,
      size: 30,
      total: 1,
      json_fields: {
        "姓名": "name",
        "性别": "sex",
        "身份证号": "IDCard",
        "电话号码": "tel",
        "学校": "schoolName",
        "学院": "collegeName",
        "专业": "majorName",
        "状态": "status",
        "报名时间": "updateTime",
        "竞赛名称": "contestName"
      },
      visible: false,
      visibleLook:false,
      json_data: [],
      applyData: [],
      dialogVisible: false,
      collegeData: init.college,
      searchForm: {
        Sno: '',
        name: '',
        collegeName: this.$store.getters["userStore/userInfo"].collegeName,
        radio: 3
      },
      options: [{
        value: '1',
        label: '通过'
      }, {
        value: '2',
        label: '驳回'
      }],
      isOk: '',
      id: ''
    }
  },
  filters: {
    time, sex, school, college,
    major
  },
  created() {
    this.GetApplyInfoData()
  },
  methods: {
    lookAt() {
      this.visibleLook = !this.visibleLook
      admin.lookAt().then(r => {
        const data = r.data.data.apply
        // 未审核
        let f1 = ''
        // 已通过
        let f2 = ''
        // 未通过
        let f3 = ''
        data.forEach(v => {
          if (v._id === 0) {
            f1 = v.count
          } else if (v._id === 1) {
            f2 = v.count
          } else {
            f3 = v.count
          }
        })
        this.myChats({
          title: {
            text: '报名数据分析',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '报名人数',
              type: 'pie',
              radius: '50%',
              data: [
                {value: f1, name: '未审核'},
                {value: f2, name: '已通过'},
                {value: f3, name: '未通过'},
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }, '#lookAt')
      })
    },
    handleSizeChange(size) {
      this.size = size
      this.limit = size
      this.GetApplyInfoData()
    },
    handleCurrentChange(size) {
      this.page = size
      this.GetApplyInfoData()
    },

    // 初始化echarts实例
    myChats(option, el) {
      // 基于准备好的dom，初始化echarts实例
      let myChartPeople = this.$echarts.init(document.querySelector(el))
      // 绘制图表

      myChartPeople.setOption(option);
    },

    // 全部删除
    delAllData(id) {
      this.visible = false
      const param = {
        id: id ? id : undefined
      }
      // loading加载框
      const loading = this.$loading({
        lock: true,
        text: '删除中请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      admin.delAllData(param).then(r => {
        if (r.data.status === '200') {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
          loading.close();
          this.GetApplyInfoData()
        }
      }).catch(() => {
        loading.close();
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
      })


    },

    cellStyle() {
      return {
        'text-align': 'center',
        'overflow': 'hidden',
        'text-overflow': 'ellipsis',
        'white-space': 'nowrap',
      }
    },

    handleClickOk() {
      const param = {
        id: this.id,
        status: this.isOk
      }
      admin.UpdateStatus(param).then(r => {
        if (r.data.status === '200') {
          this.$message({
            message: '审核完成',
            type: 'success'
          });
          this.dialogVisible = false
          this.GetApplyInfoData()
        }
      }).catch(() => {
        this.$message.error('审核失败');
      })
    },
    handleClickCheck(id) {
      this.id = id
      this.dialogVisible = true
    },
    GetApplyInfoData() {
      const param = {
        collegeName: this.searchForm.collegeName,
        Sno: this.searchForm.Sno !== "" ? this.searchForm.Sno : undefined,
        name: this.searchForm.name !== "" ? this.searchForm.name : undefined,
        limit: this.limit,
        skip: (this.page - 1) * this.size,
        radio: this.searchForm.radio === 3 ? undefined : this.searchForm.radio
      }
      admin.GetApplyInfoData(param).then(r => {
        this.applyData = r.data.data
        let json_data = []
        this.total = r.data.data.length
        // 组excel报表数据
        r.data.data.forEach(v => {
          const obj = {
            name: v.user[0].name,
            sex: sex(v.user[0].sex),
            IDCard: v.user[0].IDCard,
            tel: v.user[0].tel,
            schoolName: school(v.user[0].schoolName),
            collegeName: college(v.user[0].collegeName),
            majorName: major(v.user[0].majorName),
            status: v.status === 0 ? '未审核' : v.status === 2 ? '驳回' : '已审核',
            updateTime: time(v.updateTime),
            contestName: v.contest[0].name
          }
          json_data.push(obj)
        })
        this.json_data = json_data
      })
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 34%;
}

</style>